<template>
    <div>
        <el-card shadow="never">
            <vxe-grid ref='xGrid' v-bind="gridOptions" v-on="gridEvent">
                <template #logslot="{ row }">
                    <el-popover placement="top-start" :width="150" :height="150" trigger="hover">
                        <el-image style="width: 120px; height: 120px" :src="row.avatarUrl" fit="cover" />
                        <template #reference>
                            <el-image style="width: 36px; height: 36px" :src="row.avatarUrl" fit="cover" />
                        </template>
                    </el-popover>
                </template>

                <template #action="{ row }">
                    <el-button :type="row.disabled == 1 ? 'primary' : 'danger'" @click="changeState(row)">{{ row.disabled ==
                        0 ?
                        '停用'
                        : '启用' }}</el-button>
                    <el-button type="danger" @click="delUser(row)" plain>删除</el-button>
                </template>
            </vxe-grid>
            <el-button type="primary" @click="showDrawer = true">
                <template #icon>
                    <div>
                        <el-icon>
                            <Plus />
                        </el-icon>
                    </div>
                </template>
                添加业务员
            </el-button>
        </el-card>
        <el-drawer v-model="showDrawer" size="400">
            <template #header>
                <h4>添加业务员</h4>
            </template>
            <template #default>
                <div>
                    <el-form-item label="用户名">
                        <el-input v-model="userFormState.user.name"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input type="number" v-model="userFormState.user.mobile"></el-input>
                    </el-form-item>

                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import { http } from '@/plugins/axios'
import { ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
const { gridOptions } = useMember();
const showDrawer = ref(false)
const userFormState = reactive({
    user: {
        name: "",
        mobile: "",
    }
})

const onSubmit = async () => {
    if (userFormState.user.name === "" || userFormState.user.mobile === "") {
        ElMessageBox.alert("请填写完整信息", "提示", {
            confirmButtonText: "确定",
            type: "error"
        })
        return
    }
    //验证手机号格式
    if (!/^1[3-9]\d{9}$/.test(userFormState.user.mobile)) {
        ElMessageBox.alert("手机号格式不正确", "提示", {
            confirmButtonText: "确定",
            type: "error"
        })
        return
    }
    await http.request({
        url: `user`,
        method: "POST",
        data: userFormState.user
    })
    xGrid.value.commitProxy("reload")
}
const gridEvent: VxeGridListeners<RowVO> = {
    proxyQuery() {
        console.log('数据代理查询事件')
    },
    proxyDelete() {
        console.log('数据代理删除事件')
    },
    proxySave() {
        console.log('数据代理保存事件')
    }
}
const xGrid = ref({} as VxeGridInstance)
const changeState = (row) => {
    ElMessageBox.confirm('确定修改吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        await http.request({
            url: `/user/${row.id}/changeState`,
            method: "post",
        })
        xGrid.value.commitProxy("reload")
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消停用',
        })
    })
}

const delUser = (row) => {
    ElMessageBox.confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        await http.request({
            url: `user/${row.id}`,
            method: "delete",
        })
        xGrid.value.commitProxy("reload")
    })
}

</script>

<style scoped></style>